import React from "react";

class Son extends React.Component {
    componentDidMount() {
        console.log("儿子的componentDidMount");
    }

    componentWillUnmount() {
        console.log("儿子的componentWillUnmount");
    }
    render() {
        return <div>子组件</div>;
    }
}

class AppClass extends React.Component {
    constructor() {
        super();
        console.log("构造函数");
        // 可以挂载state
        this.state = {
            name: "123",
            count: 0,
            flag: true,
        };
    }
    // state = {}
    componentDidMount() {
        // 1. 获取元素
        // 2. 请求接口
        console.log("父亲componentDidMount");
    }
    componentDidUpdate() {
        // console.log("componentDidUpdate");
    }
    render() {
        // 挂载和更新都会触发，切记不要在render中更新数据
        // console.log("render");
        // this.setState({ name: 1234 });
        return (
            <div>
                生命周期 {this.state.name}
                <p>count: {this.state.count}</p>
                <button
                    onClick={() => {
                        this.setState({
                            count: this.state.count + 1,
                        });
                    }}>
                    count+1
                </button>
                <button
                    onClick={() => {
                        this.setState({
                            flag: !this.state.flag,
                        });
                    }}>
                    子组件显示隐藏
                </button>
                {this.state.flag ? <Son></Son> : null}
            </div>
        );
    }
}

export default AppClass;
